<template>
  <section class="report">
    <div class="user-header">
      <Header active="0"/>
    </div>
    <div class="report-box content">
      <div class="report-left">
        <div class="steps">
          <div class="year-item">
              <div class="clearfix" @click="activeMenu=-1">
                  <div class="item-circle"></div>
                  <div class="item-txt cur" :class="{'item-txt-active': activeMenu===-1}">所有年度数据</div>
              </div>
              <div class="item-line" v-if="chartData">
              </div>
          </div>
          <div class="year-item" v-for="(item,index) in chartData.chat" :key="index">
            <div class="clearfix" @click="changeChart(index)">
              <div class="item-circle"></div>
              <div class="item-txt cur" :class="{'item-txt-active': activeMenu===index}">{{item.year}}年</div>
            </div>
            <div class="item-line" v-if="index !== chartData.chat.length -1"></div>
          </div>
        </div>
      </div>
      <div class="report-cnt">
        <div class="all-data" v-show="activeMenu===-1">
          <div class="title">{{name}}</div>
          <div class="all-data-box">
            <div class="item" v-for="(item,index) in yearData.list" :key="index">
              <el-progress 
                type="circle" 
                :percentage="item.totalMileage > 0 ? 100 : 50"
                :stroke-width="10"
                :width="180"
                :show-text="false"
                color="#30c17b"></el-progress>
                <div class="info">
                  <div class="mileage ellipsis">{{item.totalMileage}}KM</div>
                  <div class="year">{{item.year}}年</div>
                </div>
              <div class="sub">
                <span>{{item.totalMember}}人</span> <span>人均跑量: {{item.avgMileage}}KM</span>
              </div>
            </div>
          </div>
        </div>
        <div class="year-data" v-show="activeMenu!==-1">
          <div class="echart-box">
             <div class="echarts" id="echarts" style="width:100%; height:400px;"></div>
          </div>
          <div class="year" v-if="activeChart">{{activeChart.year}} / {{activeMonth.month}}</div>
          <div class="detail" v-if="activeChart">
            <div class="mileage">
              <p>{{activeMonth.totalMileage}}</p>
              <span>本月跑量(km)</span>
            </div>
            <div class="sign">
              <p>{{activeMonth.signMember}}</p>
              <span>本月打卡人数</span>
            </div>
            <div class="avgrun">
              <p>{{activeMonth.avgRun}}</p>
              <span>本月人均跑量(km)</span>
            </div>
          </div>
          <div class="list" v-if="detail.list && detail.list.length > 0">
            <div class="sub-title">详细数据</div>
            <div class="list-box">
              <div class="item" v-for="(item,index) in detail.list" :key="index">
                <p class="time">{{`${new Date(item.date*1000).getFullYear()}-${new Date(item.date*1000).getMonth() + 1}`}}</p>
                <p class="mile">{{item.mileage}}KM</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import Header from '~/components/header.vue'
import api from '~/api/report'
export default {
  layout: 'home',
  components: {
    Header
  },
  data () {
    return {
      activeMenu: 0,
      name: '',
      userId: '',
      groupId: '',
      yearData: '',
      chartData: '',
      activeChart: '',
      activeMonth: '',
      detail: '',
      myChart: ''
    }
  },
  methods: {
    //获取所有数据
    getYear () {
      api.getYear({groupId: this.groupId}).then((res) => {
        if (res.data.code === 200) {
          this.yearData = res.data.data
        }
      }).catch(() => {})
    },
    // 获取chart数据
    getChart () {
      api.getChart({groupId: this.groupId, userId: this.userId}).then((res) => {
        if (res.data.code === 200) {
          this.chartData = res.data.data
          if(res.data.data.chat){
            let length = res.data.data.chat.length
            this.activeMenu = length -1
            this.activeChart = res.data.data.chat[length-1]
            for (let i=0; i<this.activeChart.month.length; i++) {
              let item = this.activeChart.month[i]
              if (item.avgRun > 0) {
                this.activeMonth = this.activeChart.month[i]
                break
              }
            }
            if (!this.activeMonth) {
              this.activeMonth = this.activeChart.month[0]
            }
            this.echartData()
            this.getDetail()
          } else{
             this.activeMenu = -1
          }
        }
      }).catch(() => {})
    },
    // 切换数据表
    changeChart (index) {
      this.activeMenu = index
      this.activeChart = this.chartData.chat[index]
      for (let i=0; i<this.activeChart.month.length; i++) {
        let item = this.activeChart.month[i]
        if (item.avgRun > 0) {
          this.activeMonth = this.activeChart.month[i]
          break
        }
      }
      if (!this.activeMonth) {
        this.activeMonth = this.activeChart.month[0]
      }
      this.echartData()
      this.getDetail()
    },
    // 初始化echart
    initEcharts () {
      var echarts = require('echarts')
      this.myChart = echarts.init(document.getElementById('echarts'))
      var option = {
            title : {
                text: '跑图年度数据统计',
            },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['本月跑量','本月打卡人数','本月人均跑量']
            },
            grid: {
                left: '0',
                right: '0',
                bottom: '0',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'本月跑量',
                    type:'bar',
                    stack: '总量',
                    data:[]
                },
                {
                    name:'本月打卡人数',
                    type:'bar',
                    stack: '总量',
                    data:[]
                },
                {
                    name:'本月人均跑量',
                    type:'bar',
                    stack: '总量',
                    data:[]
                }
            ]
        }
      this.myChart.setOption(option)
      this.myChart.on('mousemove', (params) => {
        this.activeMonth = this.activeChart.month[params.dataIndex]
      })
    },
    // 处理echart数据
    echartData () {
      let data = this.activeChart.month
      let totalMileage = [], avgRun = [], signMember = []
      data.forEach(element => {
        totalMileage.push(element.totalMileage)
        avgRun.push(element.avgRun)
        signMember.push(element.signMember)
      })
      this.myChart.setOption({
        series : [
            {
                name:'本月跑量',
                type:'bar',
                stack: '总量',
                data: totalMileage
            },
            {
                name:'本月打卡人数',
                type:'bar',
                stack: '总量',
                data: signMember
            },
            {
                name:'本月人均跑量',
                type:'bar',
                stack: '总量',
                data: avgRun
            }
        ]
      })
    },
    // 获取跑步详情
    getDetail () {
      let time = parseInt(new Date(`${this.activeChart.year}-1-1`).getTime() / 1000)
      api.getDetail({userId: this.userId, groupId: this.groupId, type: 0, date: time}).then((res) => {
        if (res.data.code === 200) {
          this.detail = res.data.data
        }
      }).catch(() => {})
    }
  },
  mounted () {
    this.name = this.$route.query.name
    this.groupId = this.$route.query.groupId
    this.userId = JSON.parse(window.sessionStorage.getItem('userInfo')).userId
    this.initEcharts() // 初始化echart
    this.getYear() // 获取年度数据
    this.getChart() // 获取echart数据
    
  }
}
</script>

<style lang="scss">
.report{
  background-color: #fafafa;
  .user-header{
    padding: .14rem 0 .75rem;
    background: #30c17b;
    .header a.red {
      color: #000!important;
    }
  }
  .report-box{
    font-size: 0.18rem;
    padding-top: 0;
    padding-bottom: .5rem;
    .report-left{
      width: 25%;
      float: left;
      padding: 0.2rem;
      margin-top: 0.2rem;
      .steps{
        background-color: #fff;
        min-height: 6rem;
        padding: 0.2rem;
        .year-item{
          clear: both;
          color: #666;
          .clearfix{
            cursor: pointer;
          }
          .item-line {
            margin-left: .11rem;
            border-left: 2px solid #d8d8d8;
            height: 0.8rem;
          }
          .item-circle {
              float: left;
              width: .23rem;
              height: .23rem;
              background: #fff;
              border: 1px solid #dadada;
              border-radius: 50%;
          }
          .item-txt {
            float: left;
            height: .23rem;
            line-height: .23rem;
            padding-left: .2rem;
            font-size: 14px;
            letter-spacing: 1.4px;
          }
          .item-txt-active {
            font-size: 14px;
            color: #01b86b;
            letter-spacing: 1.4px;
          }
        }
      }
    }
    .report-cnt{
      flex: 1;
      padding: 0.3rem;
      position: relative;
      margin-left: 1%;
      width: 74%;
      float: left;
      margin-top: -0.3rem;
      background-color: #fff;
      min-height: 6.5rem;
      .title{
        font-size: .14rem;
        color: #787878;
        letter-spacing: .014rem;
      }
      .all-data-box{
        margin-top: 0.3rem;
        .item{
          width: 50%;
          float: left;
          text-align: center;
          position: relative;
          margin-bottom: 0.3rem;
          .sub{
            font-size: .16rem;
            color: #787878;
            padding: 0.15rem 0 0;
            span{
              margin-right: 0.1rem;
            }
          }
          .info{
            position: absolute;
            width: 100%;
            top: 0.6rem;
            .mileage{
              padding-bottom: 0.1rem;
            }
          }
        }
      }
      .year-data{
        .year{
          margin: 0.4rem 0 0.1rem 0;
          flex: 1;
        }
        .detail{
          margin-top: 0.2rem;
          display: flex;
          border-bottom: 1px solid #ddd;
          padding-bottom: 0.2rem;
          .mileage,.sign,.avgrun{
            flex: 1;
            text-align: center;
            color: #666;
            p{
              font-size: 0.18rem;
              padding-bottom: 0.1rem;
              color: #333;
            }
            span{
              font-size: 0.14rem;
            }
          }
        }
        .list{
          margin: 0.3rem 0;
          .sub-title{
            font-size: 0.18rem;
            color: #333;
            margin-bottom: 0.4rem;
          }
          .item {
            border-bottom: 1px solid #ddd;
            display: flex;
            padding-bottom: 0.1rem;
            font-size: 0.16rem;
            margin-bottom: 0.2rem;
            .time{
              font-size: 0.14rem;
              width: 1rem;
              color: #666;
            }
            .mile {
              flex: 1;
              color: #333;
            }
          }
        }
      }
    }
  }
}
</style>

